<template>
	<el-descriptions :column="4" border>
		<el-descriptions-item label="应用编号">{{ basicNameInfoData?.threeListCode || '' }}</el-descriptions-item>
		<el-descriptions-item label="应用名称">{{ basicNameInfoData?.threeListName || '' }}</el-descriptions-item>
		<el-descriptions-item label="申报时间">{{ basicNameInfoData?.declarationTime || '' }}</el-descriptions-item>
		<el-descriptions-item label="责任部门">{{ basicNameInfoData?.responsibleDeptName || '' }}</el-descriptions-item>
		<el-descriptions-item label="负责人姓名">{{ basicNameInfoData?.headName || '' }}</el-descriptions-item>
		<el-descriptions-item label="负责人电话">{{ basicNameInfoData?.headPhone || '' }}</el-descriptions-item>
		<el-descriptions-item label="所属领域">{{ basicNameInfoData?.belongDomainName || '' }}</el-descriptions-item>
		<el-descriptions-item label="专题组组长单位">{{ basicNameInfoData?.teamLeaderUnitName || '' }}</el-descriptions-item>
		<el-descriptions-item label="状态">
			<el-tag size="small">{{ basicNameInfoData?.threeListStatusName || '' }}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item label="所属跑道">{{ basicNameInfoData?.belongingRunwayName || '' }}</el-descriptions-item>
		<el-descriptions-item label="拟部署端口">{{ basicNameInfoData?.deployPortsName || '' }}</el-descriptions-item>
		<el-descriptions-item label="是否组建专班组">{{ basicNameInfoData?.isWorkTeamName || '' }}</el-descriptions-item>
		<el-descriptions-item v-if="basicNameInfoData.isWorkTeam === '1'" label="专班组建情况">{{
			basicNameInfoData?.specialTeamFormation || ''
		}}</el-descriptions-item>
		<el-descriptions-item label="预算金额（万元）">{{ basicNameInfoData?.budgetAmount }}</el-descriptions-item>
		<el-descriptions-item label="建设类型">{{ basicNameInfoData?.constructTypeName || '' }}</el-descriptions-item>
		<el-descriptions-item v-if="basicNameInfoData?.existingApplicationName" label="已有应用名称">{{
			basicNameInfoData?.existingApplicationName || ''
		}}</el-descriptions-item>
		<div v-if="integratedApplicationListData.length > 0">
			<span v-for="item in integratedApplicationListData" :key="item.integratedApplicationName">
				<el-descriptions-item label="拟整合应用名称">{{ item?.integratedApplicationName || '' }}</el-descriptions-item>
				<el-descriptions-item label="主管部门">{{ item?.competentDepartment || '' }}</el-descriptions-item>
			</span>
		</div>
	</el-descriptions>
	<el-descriptions :column="1" border>
		<el-descriptions-item label="涉及部门审查意见函的正式公文">
			<HyUpload :type="'view'" v-model="officialDocumentsFileIdList" />
		</el-descriptions-item>
		<el-descriptions-item label="多跨场景拆解集成图">
			<HyUpload :type="'view'" v-model="integrationDiagramFileIdList" />
		</el-descriptions-item>
		<el-descriptions-item label="数据来源图">
			<HyUpload :type="'view'" v-model="requirementsDiagramsFileIdList" />
		</el-descriptions-item>
		<el-descriptions-item label="核心业务架构图">
			<HyUpload :type="'view'" v-model="architectureDiagramFileIdList" />
		</el-descriptions-item>
		<el-descriptions-item label="三张清单">
			<HyUpload :type="'view'" v-model="threeListFileIdList" />
		</el-descriptions-item>
	</el-descriptions>
</template>
<script setup lang="ts">
import HyUpload from '/@/components/HyUpload/index.vue';

const props: any = defineProps({
	basicNameInfoData: {
		type: Object,
		default: () => ({}),
	},
	fileListData: {
		type: Object,
		default: () => ({}),
	},
	integratedApplicationListData: {
		type: Object,
		default: () => ({}),
	},
});

const { basicNameInfoData, fileListData, integratedApplicationListData } = toRefs(props);
const officialDocumentsFileIdList = ref<any>([]);
const integrationDiagramFileIdList = ref<any>([]);
const requirementsDiagramsFileIdList = ref<any>([]);
const architectureDiagramFileIdList = ref<any>([]);
const threeListFileIdList = ref<any>([]);
watch(
	() => fileListData,
	(nv1) => {
		if (nv1.value.officialDocumentsFileIdList) {
			officialDocumentsFileIdList.value = nv1.value.officialDocumentsFileIdList;
		}
		if (nv1.value.integrationDiagramFileIdList) {
			integrationDiagramFileIdList.value = nv1.value.integrationDiagramFileIdList;
		}
		if (nv1.value.requirementsDiagramsFileIdList) {
			requirementsDiagramsFileIdList.value = nv1.value.requirementsDiagramsFileIdList;
		}
		if (nv1.value.architectureDiagramFileIdList) {
			architectureDiagramFileIdList.value = nv1.value.architectureDiagramFileIdList;
		}
		if (nv1.value.threeListFileIdList) {
			threeListFileIdList.value = nv1.value.threeListFileIdList;
		}
	},
	{
		immediate: true,
		deep: true,
	}
);
</script>
<style scoped lang="scss">
:deep(.el-descriptions__label) {
	width: 10% !important;
}
</style>
